<template>
	<div id="header">
		<div class="UpperPart">
			<div class="w1200">
				<div class="left">您好！欢迎来到融达机电设备工程有限公司</div>
				<div class="right">
					<div>在线留言</div>
					<div>联系我们</div>
					<div>
						<i class="iconfont icon-dianhua"></i>
						0731-88160968
					</div>
				</div>
			</div>
		</div>
		<div class="Beneath w1200">
			<div id="logo" @click="toHome">
				<img :src="logo" alt="" srcset="" />
			</div>
			<div id="NavigationBar">
				<div class="tr" v-for="(item, i) in WebSiteArchitecture" :key="i">
					<div
						class="th"
						@click="
							gotopage(
								(urls = item.urls),
								(Markdowns = item.Markdowns),
								(Picturelist = item.Picturelist),
								(cards = item.cards),
								(sort = item.sort)
							)
						"
					>
						{{ item.text }}
					</div>
					<div
						class="td"
						v-for="(items, j) in item.subMenus"
						:key="j"
						@click="
							gotopage(
								(urls = items.urls),
								(Markdowns = items.Markdowns),
								(Picturelist = items.Picturelist),
								(cards = items.cards),
								(sort = items.sort)
							)
						"
					>
						{{ items.text }}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import axios from 'axios'
import {PagesJump} from '@/utils'
export default {
	name: 'Header',
	// import引入的组件需要注入到对象中才能使用
	components: {},
	props: {},
	data() {
		// 这里存放数据
		return {
			logo: 'http://public.znrdtech.cn/images/logo.png',
			WebSiteArchitecture: Array,
			TitleList: [
				{
					text: '官网首页',
					urls: 'Home'
				}
			]
		}
	},
	// 计算属性 类似于data概念
	computed: {},
	// 监控data中的数据变化
	watch: {},
	// 方法集合
	methods: {
		toHome() {
			this.$router.push({name: 'Home'})
		},
		gotopage(urls, Markdowns, Picturelist, cards, sort) {
			PagesJump(urls, Markdowns, Picturelist, cards, sort)
		},
		getHeaderInfo() {
			axios.get('/api/WebSiteArchitecture').then(res => {
				this.WebSiteArchitecture = res.data.WebSiteArchitecture
			})
		}
	},
	// 生命周期 - 创建完成（可以访问当前this实例）
	created() {},
	// 生命周期 - 挂载完成（可以访问DOM元素）
	mounted() {
		this.getHeaderInfo()
	},
	beforeCreate() {}, // 生命周期 - 创建之前
	beforeMount() {}, // 生命周期 - 挂载之前
	beforeUpdate() {}, // 生命周期 - 更新之前
	updated() {}, // 生命周期 - 更新之后
	beforeDestroy() {}, // 生命周期 - 销毁之前
	destroyed() {}, // 生命周期 - 销毁完成
	activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
#header {
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	align-items: center;
	.UpperPart {
		width: 100%;
		height: 35px;
		line-height: 35px;
		background-color: black;
		color: white;
		.left,
		.right {
			width: 340px;
			height: 35px;
			padding: 0 15px;
			font-weight: bold;
			background-color: #2c7bd3;
			display: flex;
			justify-content: space-around;
			align-items: center;
			align-content: center;
		}
		.left {
			float: left;
		}
		.right {
			float: right;
		}
	}
	.Beneath {
		height: 100px;
		padding: 20px 0;
		z-index: 120;
		#logo {
			width: 280px;
			height: 60px;
			float: left;
			img {
				width: 100%;
				height: 100%;
			}
		}
		#NavigationBar {
			float: right;
			.tr {
				width: 90px;
				float: left;
				margin: 0 10px;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				align-content: space-around;
				.th {
					width: 90px;
					height: 60px;
					line-height: 60px;
					font-size: 22px;
					text-align: center;
					float: left;
				}
				.td {
					width: 90px;
					text-align: center;
					background-color: white;
					font-size: 15px;
					height: 40px;
					line-height: 40px;
					margin: 0;
					display: none;
				}
				.td:hover,
				.th:hover {
					border-bottom: 3px solid orange;
				}
			}
			.tr:hover .td {
				display: block;
			}
		}
	}
}
</style>
